<template>
  <tabNavHeader title="协作"></tabNavHeader>
  <view class="work-box" :style="'min-height: ' + boxHeight + 'rpx;'">
    <view class="utils-box">
      <view
        class="list-utils-data"
        v-for="(item, index) in listUtilsData"
        :key="index"
        @tap="handleClick(item, index)"
      >
        <image :src="item.url" v-if="item.url"></image>
        <view class="url-none" v-else-if="!item.url">
          <i class="iconfont icon-jiahao"></i>
        </view>
        <text v-if="item.title">{{ item.title }}</text>
        <text v-else-if="!item.title">待补充</text>
      </view>
    </view>
    <view class="utils-app">
      <h4>全部应用</h4>
      <uv-tabs
        class="tabs-box"
        :list="utilsApp"
        @tap="navView"
        lineColor="#165DFF"
        :lineWidth="40"
        :activeStyle="{
          color: '#165DFF',
          fontSize: '26rpx',
          fontWeight: '500',
        }"
        :inactiveStyle="{
          color: '#8D96A2',
          fontSize: '26rpx',
          fontWeight: '400',
        }"
      >
        <!--     <template v-slot:right>
          <view style="padding-left: 4px" @tap="toast">
            <uv-icon name="list" size="21" bold></uv-icon>
          </view>
        </template> -->
      </uv-tabs>
      <template v-for="(item, index) in tabViewList" :key="index">
        <view class="transition">
          <view
            v-for="(item1, index1) in item.view1"
            :key="index1"
            class="list-row"
            @tap="nav(item1.pagesUrl)"
            v-show="index == showId"
          >
            <view class="list-svg" hover-class="bg-btn">
              <image :src="item1.listSvg"></image>
            </view>
            <text>{{ item1.title }}</text>
          </view>
        </view>
        <!--      <uni-transition
          custom-class="transition"
          :mode-class="modeClass"
          :show="showId == index"
        >
          <view
            v-for="(item1, index1) in item.view1"
            :key="index1"
            class="list-row"
            @tap="nav(item1.pagesUrl)"
            v-show="index == showId"
          >
            <view class="list-svg" hover-class="bg-btn">
              <image :src="item1.listSvg"></image>
            </view>
            <text>{{ item1.title }}</text>
          </view>
        </uni-transition> -->
        <!-- 自定义 tabBar -->
        <custom-tabbar :currentIndex="1" />
      </template>
    </view>
  </view>
</template>

<script setup>
import CustomTabbar from '@/components/customTabbar/custom-tabbar.vue'
import { onLoad } from '@dcloudio/uni-app'
import tabNavHeader from '@/components/tabNavHeader/tabNavHeader.vue'
import { ref, reactive } from 'vue'
import { getTitleBarHeight } from '@/utils/system.js'

const currentIndex = ref(1)
// 页面内容高度
const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

const handleClick = (item, index) => {
  // console.log(item.title, index)
  if (item.title === '假勤') {
    uni.navigateTo({
      url: '/pages/attendance/attendancePage',
    })
  }
  if (item.title === '审批') {
    uni.navigateTo({
      url: '/pages/audit/index',
    })
  }
  if (item.title === '日程') {
    uni.navigateTo({
      url: '/pages/schedule/index',
    })
  }
  if (item.title === '公告') {
    uni.navigateTo({
      url: '/pages/announcement/index',
    })
  }
}

// 头部应用
let listUtilsData = reactive([
  {
    url: '../../static/images/work/Frame 14.png',
    title: '假勤',
  },
  {
    url: '../../static/images/work/Frame 11.png',
    title: '审批',
  },
  {
    url: '../../static/images/work/Frame 15.png',
    title: '日程',
  },
  {
    url: '../../static/images/work/Frame 16.png',
    title: '公告',
  },
  // {
  //   url: '',
  //   title: '',
  // },
  // {
  //   url: '',
  //   title: '',
  // },
  // {
  //   url: '',
  //   title: '',
  // },
  // {
  //   url: '',
  //   title: '',
  // },
])
// 页面应用
let utilsApp = reactive([
  {
    name: '最近使用',
  },
  {
    name: '成本核算',
  },
  {
    name: '设计工单',
  },
  {
    name: '工单管理',
  },
  {
    name: '客户管理',
  },
  {
    name: '安装管理',
  },
  {
    name: '外协管理',
  },
  {
    name: '财务管理',
  },
])

const toast = () => {
  uni.showToast({
    icon: 'none',
    title: '插槽被点击',
  })
}
// 滑块
let modeClass = ref('fade')
let showId = ref(0)
const navView = (v) => {
  modeClass.value = ['fade', 'slide-right']
  showId.value = v.index
}
// tab页面
let tabViewList = reactive([
  {
    view1: [
      {
        listSvg: '../../static/svg/common.svg',
        title: '物料单',
        pagesUrl: '/pages/material/index',
      },
      {
        listSvg: '../../static/svg/common.svg',
        title: '测量单',
        pagesUrl: '/pages/measurement/index',
      },
    ],
  },
  {
    view1: [
      {
        listSvg: '../../static/svg/common.svg',
        title: '物料单',
        pagesUrl: '/pages/material/index',
      },
      {
        listSvg: '../../static/svg/common.svg',
        title: '测量单',
        pagesUrl: '/pages/measurement/index',
      },
      {
        listSvg: '../../static/svg/common.svg',
        title: '业务列表',
        pagesUrl: '/pages/measurement/measurementList/measurementList',
      },
      {
        listSvg: '../../static/svg/common.svg',
        title: '核算列表',
        pagesUrl: '/pages/accounting/accountingList/accountingList',
      },
    ],
  },
  {
    view1: [
      {
        listSvg: '../../static/svg/common.svg',
        title: '设计接单',
        pagesUrl: '/pages/devise/orderTakingPool/orderTakingPool',
      },
      // {
      // 	listSvg: '../../static/svg/common.svg',
      // 	title: '我的设计',
      // 	pagesUrl: '/pages/devise/designLists/designLists'
      // },
      {
        listSvg: '../../static/svg/common.svg',
        title: '设计审核',
        pagesUrl: '/pages/devise/designReview/designReview',
      },
    ],
  },
  {
    view1: [],
  },
  {
    view1: [
      {
        listSvg: '../../static/svg/common.svg',
        title: '客户拜访',
        pagesUrl: '/pages/visit/customerVisit',
      },
      {
        listSvg: '../../static/svg/common.svg',
        title: '拜访列表',
        pagesUrl: '/pages/visit/visitList',
      },
      // {
      // 	listSvg: '../../static/svg/common.svg',
      // 	title: '里程记录',
      // 	pagesUrl: '/pages/visit/gpsRecords',
      // },
      // {
      //   listSvg: '../../static/svg/common.svg',
      //   title: '油费报销',
      //   pagesUrl: '/pages/visit/fuelBaoxiao',
      // },
    ],
  },
  {
    view1: [
      // {
      //   listSvg: '../../static/svg/common.svg',
      //   title: '施工过程',
      //   pagesUrl: '/pages/install/install',
      // },
      {
        listSvg: '../../static/svg/common.svg',
        title: '安装订单',
        pagesUrl: '/pages/install/installOrderList/installOrderList',
      },
    ],
  },
  {
    view1: [
      // {
      //   listSvg: '../../static/svg/common.svg',
      //   title: '施工过程',
      //   pagesUrl: '/pages/install/install',
      // },
      // {
      //   listSvg: '../../static/svg/common.svg',
      //   title: '出库申请单',
      //   pagesUrl: '/pages/outboundApply/outboundApply',
      // },
    ],
  },
])

// 跳转页面
const nav = (url) => {
  uni.navigateTo({
    url,
  })
}
onLoad(() => {
  uni.hideTabBar()
})
</script>

<style lang="scss" scoped>
@import '/static/style/index.scss';

.work-box {
  background-color: $uni-bai;
  box-sizing: border-box;

  .utils-box {
    // display: grid;
    // grid-template-columns: 1fr 1fr 1fr 1fr;
    // grid-template-rows: 1fr 1fr;
    // gap: 32rpx 80rpx;
    display: flex;
    justify-content: space-between;
    padding: 40rpx 55rpx;

    .list-utils-data {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 100rpx;
        height: 100rpx;
      }

      text {
        font-size: 24rpx;
        color: $text-color;
        margin-top: 16rpx;
      }

      .url-none {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1rpx solid #c9cdd4;
        border-radius: 24rpx;
        color: #c9cdd4;

        .iconfont {
          font-size: 48rpx;
        }
      }
    }
  }

  .utils-app {
    padding: 40rpx 32rpx;
    .tabs-box {
      margin-bottom: 32rpx;
    }

    h4 {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
    }

    :deep(.transition) {
      // display: grid;
      // grid-template-columns: 1fr 1fr 1fr 1fr;
      // grid-template-rows: 1fr 1fr;
      // gap: 32rpx 80rpx;
      // padding: 40rpx 23rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .list-row {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        // margin: 32rpx 32rpx 0 0;
      }

      .list-svg {
        background-color: #ffffff;
        border: 1rpx solid #e5e6eb;
        border-radius: 24rpx;
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }

      text {
        font-size: 24rpx;
        color: $text-color;
        margin-top: 16rpx;
      }
    }

    .bg-btn {
      border: none;
      background-color: #eeeff3 !important;
    }
  }
}
</style>
